<template>
	<view class="user_address_form">
		<view class="row">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="addressData.receive_name" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="addressData.receive_tel" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">地区</text>
			<!-- <uni-data-picker style="width: 90%;"
				placeholder="请选择城市"
				popup-title="请选择城市" 
				parent-field="parent_code"
				:localdata='areas'
			 /> -->
			<text class="input" @click="showPick()">
				{{default_text}}
			</text>
			<uni-icons type="location-filled" size="18" />
		</view>
		<view class="row"> 
			<text class="tit">详细</text>
			<input class="input" type="text" v-model="addressData.address" placeholder="楼号、门牌" placeholder-class="placeholder" />
		</view>
		
		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="addressData.is_default" color="#ea1f22" @change="switchChange" />
		</view>
		<button class="add-btn" @click="confirm">提交</button>
		<lb-picker mode="multiSelector" ref="picker1" :list="areas" :level="3" v-model="default_area" @confirm="handleConfirm" confirm-color='#ea1f22'></lb-picker>
	</view>
</template>

<script>
	import lbPicker from '../../../components/lb-picker/index.vue'
	export default {
		components:{lbPicker},
		data() {
			return {
				addressData:{
					is_default:true,
				},
				postData:{},
				areas:[],
				default_area:[],
				default_text:'请选择城市',
				id:0,
			};
		},
		onLoad(opt) {
			this.getArea();
			this.id = opt.id;
			if(opt.id>0){
				this.get_area_info();
			}
		},
		methods:{
			confirm(){
				let info = { ...this.addressData };
				let url = this.id >0?this.$api.addresses.url+'/'+this.id:this.$api.addresses.url
				let obj = {
					url:url,
					method:this.id >0?'put':'post'
				}
				info.is_default = this.addressData.is_default?1:0;
				this.$http(obj,info).then(res=>{
					this.$toast(res.msg)
					if(res.code == 200){
						uni.$emit('address_edit')
						return this.$nav('',3)
					}
				})
			},
			getArea(){
				this.$http(this.$api.areas).then(res=>{
					this.areas = res.data;
				})
			},
			showPick(){
				this.$refs.picker1.show()
			},
			handleConfirm(e){
				this.addressData.area_info = '';
				this.addressData.province_id = e.value[0];
				this.addressData.city_id = e.value[1];
				this.addressData.region_id = e.value[2];
				e.item.forEach(item=>{
					if(item.id == e.value[0]){
						this.addressData.area_info += item.name;
						item.children.forEach(fItem=>{
							 if(fItem.id == e.value[1]){
								 this.addressData.area_info += ' '+fItem.name;
								 fItem.children.forEach(sItem=>{
									 if(sItem.id == e.value[2]){
										 this.addressData.area_info += ' '+sItem.name;
									 }
								 })
							 }
						})
						this.default_text = this.addressData.area_info;
						return;
					}
				})
			},
			get_area_info(){
				let obj = {
					url:this.$api.addresses.url+'/'+this.id,
					method:'get',
				}
				// console.log(obj.url)
				this.$http(obj).then(res=>{
					this.default_text = res.data.area_info;
					let data = res.data;
					data.is_default = data.is_default == 1?true:false;
					this.addressData = data;
					
					this.default_area[0] = res.data.province_id;
					this.default_area[1] = res.data.city_id;
					this.default_area[2] = res.data.region_id;
				})
			},
			switchChange(e){
				this.addressData.is_default = e.detail.value;
			}
		}
	}
</script>

<style lang="scss">
.user_address_form{
	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		border-top: 1px solid #f4f4f4;
		.tit{
			flex-shrink: 0;
			width: 120upx;
			font-size: 30upx;
		}
		.input{
			flex: 1;
			font-size: 30upx;
		}
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		color: #fff;
		background-color: #ea1f22;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 40, 43, 0.4);		
	}
	
}
</style>
